<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>1-绘制一个简单的图表</title>
		<script src="../js/echarts/echarts.min.js"></script>
	</head>
	<body>
		<h1>1-简单的图表</h1>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));

			// 指定图表的配置项和数据
			var option = {
				title: {
					text: 'ECharts 入门示例'
				},
				tooltip: {},
				legend: {
					data: ['销量']
				},
				xAxis: {
					data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
				},
				yAxis: {},
				series: [{
					name: '销量',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20]
				}]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>

		<h1>2-简单的饼图</h1>
		<div id="main2" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main2'));
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(myChart.setOption({
				series: [{
					name: '访问来源',
					type: 'pie', // 饼图
					roseType: 'angle', //南丁格尔图
					radius: '55%',
					data: [{
							value: 235,
							name: '视频广告'
						},
						{
							value: 274,
							name: '联盟广告'
						},
						{
							value: 310,
							name: '邮件营销'
						},
						{
							value: 335,
							name: '直接访问'
						},
						{
							value: 400,
							name: '搜索引擎'
						}
					]
				}],
				// 设置阴影
				itemStyle: {
					// 阴影的大小
					shadowBlur: 200,
					// 阴影水平方向上的偏移
					shadowOffsetX: 0,
					// 阴影垂直方向上的偏移
					shadowOffsetY: 0,
					// 阴影颜色
					shadowColor: 'rgba(0, 0, 0, 0.5)',
					//鼠标点聚焦高亮
					emphasis: {
						shadowBlur: 200,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}));
		</script>
		
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="main3" style="width: 900px;height:600px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main3'));
		
			// 指定图表的配置项和数据
			var colors = ['#5793f3', '#d14a61', '#675bba', '#bc40db','#bc3000'];
		
			option = {
				color: colors,
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross'
					}
				},
				grid: {
					right: '30%'
				},
				toolbox: {
					feature: {
						dataView: {
							show: true,
							readOnly: false
						},
						restore: {
							show: true
						},
						saveAsImage: {
							show: true
						}
					}
				},
				legend: {
					// 固定
					data: ['当日数量', '上月同期', '上年同期', '本周接警数量']
				},
				xAxis: [{
					type: 'category',
					axisLabel: {
						interval: 0
					},
					axisTick: {
						alignWithLabel: true
					},
					// 后台返回
					data: [ "刑事警情", "行政（治安）警情", "交通类警情", "消防救援", "群众求助", "纠纷", "灾害事故", "举报", "其他警情" ]
				}],
				yAxis: [
					{
						type: 'value',
						name: '数量',
						min: 0,
						max: 100, //后台返回
						position: 'left',
						axisLine: {
							lineStyle: {
								color: colors[0]
							}
						},
						axisLabel: {
							formatter: '{value} 个'
						}
					}
				],
				series: [
					{
						name: '当日数量',
						type: 'bar',
						data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7 , 23.2, 25.6, 76.7 ]//后台返回
					},
					{
						name: '上月同期',
						type: 'bar',
						data: [1.0, 9.9, 17.0, 3.2, 15.6, 36.7, 23.2, 25.6, 76.7  ]//后台返回
					},
					{
						name: '上年同期',
						type: 'bar',
						data: [20.0, 6.9, 27.0, 33.2, 15.6, 66.7, 23.2, 25.6, 76.7  ]//后台返回
					},{
						name: '本周接警数量',
						type: 'bar',
						data: [12.0, 14.9, 9.0, 23.2, 25.6, 56.7, 23.2, 25.6, 76.7  ]//后台返回
					},{
						name: '趋势',
						type: 'line',
						data: [12.0, 20.2, 53.3, 47.5, 60.3, 80.2, 23.2, 25.6, 76.7  ]//后台返回
					}
				]
			};
		
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>
	</body>
</html>
